<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")
</head>
<body>
<div class="container">
    #include("../include/menu.html")

    <div class="row">
        <div class="col-xs-3 pull-right">
            <a href="#" id="btnAdd" class="btn btn-sm btn-default"><i
                    class="fa fa-plus"></i> 新增</a>
            <a href="#" id="btnBatchDel" class="btn btn-sm btn-danger"><i
                    class="fa fa-trash"></i> 批量删除</a>
            <a href="#" id="btnRefresh" class="btn btn-sm btn-default"><i
                    class="fa fa-refresh"></i> 刷新</a>
            <script>
                $(function () {
                    $('#btnAdd').click(function () {
                        openDialogAjax('新增', pathPrefix + '/form');
                    });

                    $('#btnRefresh').click(function () {
                        $("#jqGrid").trigger("reloadGrid");
                    });

                    $('#btnBatchDel').click(function () {
                        var ids = getSelectedRows();
                        if (ids && ids.length > 0) {
                            var href = pathPrefix + '/delete?id=' + ids;
                            confirmxDel(href);
                        } else {
                            toastr.error('未选择记录');
                        }
                    });

                    function getSelectedRows() {
                        var grid = $("#jqGrid");
                        var rowKey = grid.getGridParam("selrow");
                        if (!rowKey)
                            return '';
                        else {
                            var selectedIDs = grid.getGridParam("selarrrow");
                            var result = "";
                            for (var i = 0; i < selectedIDs.length; i++) {
                                result += selectedIDs[i] + ",";
                            }
                            return result;
                        }
                    }

                });
            </script>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="jqGrid_wrapper">
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>
    </div>
</div>
#include("../include/footer.html")
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: pathPrefix + '/getList',
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "json",
            colModel: [
                {label: 'ID', name: 'id', key: true, width: 75, search: false},
                {
                    label: 'name', name: 'name', width: 75, editable: true,
                    search: true,
                    stype: 'text',
                    searchoptions: {
                        sopt: 'cn'
                    }
                },
                {label: 'description', name: 'description', width: 75, search: false},

                {
                    label: 'available',
                    name: 'available',
                    width: 75,
                    editable: true,
                    edittype: "select",
                    editoptions: {
                        value: {
                            1: '可用',
                            0: '不可用'
                        }
                    }, search: false,
                    formatter: 'select'
                },
                {label: '创建时间', name: 'created', width: 75, search: false},
                {label: '更新时间', name: 'modified', width: 75, search: false},
                {label: "操作", name: "actions", width: 75, search: false, formatter: jqGridOperator, sortable: false},

            ],
            sortname: 'modified',
            sortorder: 'desc',
            autoScroll: true,
            rownumbers: true,
            viewrecords: true,//定义是否要显示总记录数
            rowList: [10, 30, 50],
            autowidth: true,
            height: 400,
            rowNum: 10,
            multiselect: true,
            // scroll: 1,
            // emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
            pager: "#jqGridPager",
            loadComplete: jqGridLoadComplete,

        });
        $('#jqGrid').jqGrid('filterToolbar');
    });

    function jqGridLoadComplete() {
        $('.btn-edit').on('click', function () {
            var jqGrid = $(this).parents('table').eq(0);
            if (!jqGrid) return;
            var rowId = $(this).attr('data-rowid');
            if (!rowId) return;
            if (rowId) {
                var rowObject = jqGrid.jqGrid('getRowData', rowId);
                openDialogAjax('编辑', pathPrefix + '/form?id=' + rowObject.id);
            }

        });
        $('.btn-del').on('click', function () {
            var jqGrid = $(this).parents('table').eq(0);
            if (!jqGrid) return;
            var rowId = $(this).attr('data-rowid');
            if (!rowId) return;
            var rowObject = jqGrid.jqGrid('getRowData', rowId);
            var href = pathPrefix + '/delete?id=' + rowObject.id;
            confirmxDel(href);
        });
    }

    function confirmxDel(href) {
        confirmx('确认删除吗', function () {
            $.ajax({
                url: href, success: function (result) {
                    if (result && result.result === 100) {
                        toastr.success('操作成功');
                        $("#jqGrid").trigger("reloadGrid");
                    } else {
                        var errorMsg = '操作失败：';
                        if (result && result.message && result.message.length > 0) {
                            errorMsg += result.message;
                        }
                        toastr.success(errorMsg);
                    }
                }
            });
        });

    }
</script>
</body>
</html>